`<template>
  <view class="sphere-container">
    <view class="sphere" ref="sphereRef">
      <view
        v-for="(dot, index) in dots"
        :key="index"
        class="dot"
        :style="getDotStyle(index)"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const sphereRef = ref(null);
const radius = 70;
const dotsCount =400;
const dots = ref(Array(dotsCount).fill(null));

// 计算点的位置和样式
const getDotStyle = (index) => {
  const phi = Math.acos(-1 + (2 * index) / dotsCount);
  const theta = Math.sqrt(dotsCount * Math.PI) * phi;

  const x = radius * Math.cos(theta) * Math.sin(phi);
  const y = radius * Math.sin(theta) * Math.sin(phi);
  const z = radius * Math.cos(phi);

  return {
    backgroundColor: index % 2 === 0 ? '#4169E1' : '#9ed0ff',
    transform: `translate3d(${x}px, ${y}px, ${z}px)`,
  };
};
</script>

<style scoped>
.sphere-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  perspective: 1000px;
}

.sphere {
  position: relative;
  width:400rpx;
  height:400rpx;
  transform-style: preserve-3d;
  animation: rotate 10s infinite linear;
}

.dot {
  position: absolute;
  width:6rpx;
  height:6rpx;
  border-radius: 50%;
  transform-style: preserve-3d;
  left: 50%;
  top: 50%;
}

@keyframes rotate {
  from {
    transform: rotateX(0) rotateY(0);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
</style>